<template>
	<scroll-view class="recommend_view" @scrolltolower="handlelower" scroll-y v-if="recommends.length>0">
		<view class="recommend_wrap" >
			<navigator class="recommend_item" v-for="item in recommends" :key="item.id" :url="`/pages/album/index?id=${item.target}`" >
				<image class="pic" :src="item.thumb" mode="widthFix"></image>
			</navigator>
			 
		</view>
		<!-- 月份 -->
		
		<view class="month_wrap">
			<view class="month_title">
				<view class="month_info">
					<view class="month_l">
						<text>{{months.MM}}/</text>{{months.DD}} 月
					</view>
					<view class="month_r">
						 {{months.title}}
					</view>
				</view>
				<view class="month_more">
					更多>
				</view>
			</view>
			<view class="month_content">
				<view class="ct" v-for="(item,index) in months.items" :key="item.id"> 
				
					<go-detail :list="months.items" :index="index">
						<image class="img" :src="item.thumb" mode="aspectFill"></image>
						</go-detail>
				</view>
			</view>
		</view>
		<view class="hot_wrap">
			<view class="hot_title">
				<text>热门</text>
			</view>
			<view class="hot_content" >
				<view   class="hot_pic" v-for="(item,index) in hot" :key="item.id">
					<go-detail :list="hot" :index="index">
						<image :src="item.thumb"  mode="aspectFill"></image>
					</go-detail>
						
				</view>
			
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import moment from "moment"
	import goDetail from "@/components/goDetail.vue"
	export default{
		components:{
			goDetail
		},
		data(){
			return{
				recommends:[],
				months:[],
				hot:[],
			   params:
				   {
				   	limit: 30,
				   	order: "hot",
				   	skip:0
				   },
				   hasmore:true
			   
				   
			   
			}
		},
		mounted(){
			this.getlist()
		},
		methods:{
			getlist(){
				this.request({
					url:'http://157.122.54.189:9088/image/v3/homepage/vertical',
					data:this.params
				}).then(res=>{
					console.log(res)
					if(res.data.res.vertical.length===0){
						this.hasmore=false
						return
					}
					if(this.recommends.length===0){
						console.log(res.data.res.homepage[1].items)
						this.recommends=res.data.res.homepage[1].items
						this.months=res.data.res.homepage[2]
						this.months.MM=moment(this.months.stime).format("MM")
						this.months.DD=moment(this.months.stime).format("DD")
					}
					
					 
					this.hot=[...this.hot,...res.data.res.vertical]
				})
			},
			handlelower(){
				if(this.hasmore){
					this.params.skip+=this.params.limit
					this.getlist()
				}else{
					uni.showToast({
						title:"没有数据了",
						icon:"none"
					})
				}
				
				 
			}
		}
	}
	
  </script>
 <style lang="scss"scoped>
	 .recommend_view{
		 height: calc(100vh - 36px);
	 }
	.recommend_wrap{
		 display: flex;
		 flex-wrap: wrap;
	 }
	 .recommend_item{
		 
		  width: 48%;
		  
		 border: 5rpx solid #fff;
	 }
	 .pic{
		 width: 372rpx;
	 }
	 .month_title{
		 display: flex;
		 justify-content: space-between;
		 padding: 20rpx;
	 }
	 .month_info{
		 color: #2C405A;
		 font-size: 30rpx;
		 display: flex;
	 }
	 .month_l text{
		 font-size: 36rpx;
		 font-weight: 600;
	 }
	 .month_r{
		 font-size: 34rpx;
		 margin-left: 30rpx;
	 }
	 .month_more{
		 font-size: 24rpx;
		 color: $color;
	 }
	 .month_content{
		 display: flex;
		 flex-wrap: wrap;
		 
	 }
	 .ct{
		 width: 32.33%;
		 border: 2rpx solid #fff;
	 }
	  .ct .img{
		  width: 100%;
		  height: 350rpx;
		  margin: 0 5rpx;
	  }
	  .hot_title{
		  padding: 20rpx;
		 font-size: 30rpx;
		 font-weight: 500;
	  }
	  .hot_content{
		  display: flex;
		  flex-wrap: wrap;
	  }
	  .hot_pic{
		  width: 32.33%;
		  border: 2rx solid #fff;
		 margin-left: 0.8%;
	  }
	  .hot_pic image{
		  width: 100%;
		  height: 560rpx;
	  }
 </style>
 
 
